<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="UTF-8">
    <title>首页</title>
    <link href="../css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

<div id="container" class="container">

    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <a class="navbar-brand" href="#">博客</a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li class="active">
                        <form class="navbar-form navbar-left">
                            <button type="button" class="btn btn-default" id="newBlog">新建博客</button>
                        </form>
                    </li>
                </ul>
                <form class="navbar-form navbar-left">
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="输入搜索内容" id="search">
                    </div>
                    <button type="button" id="subBtn" class="btn btn-default">搜索</button>
                </form>
                <ul class="nav navbar-nav navbar-right">

                    <li><a style="display: block" role="button" id="name" href="/logout"></a></li>

                    <!--<li class="dropdown">-->
                    <!--<a style="display: block" class="dropdown-toggle" data-toggle="dropdown"-->
                    <!--role="button" aria-haspopup="true" aria-expanded="false" id="changeUser">登录-->
                    <!--</a>-->
                    <!--</li>-->
                </ul>

            </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
    </nav>

    <table class="table table-bordered table-hover" style="margin-top: 30px" id="tab">
        <thead>
        <tr>
            <td>博客标题</td>
            <td>博客描述</td>
            <td>操作</td>
        </tr>
        </thead>
        <tbody id="tbody">

        </tbody>
    </table>

    <ul class="pagination" id="page">
        <li id="fistli">
            <a style="text-decoration: none" role="button" onclick="pageDown(currentPage)" aria-label="Previous">
                <span aria-hidden="true">&laquo;</span>
            </a>
        </li>


        <li>
            <a style="text-decoration: none" role="button" onclick="pageUp(currentPage)" aria-label="Next">
                <span aria-hidden="true">&raquo;</span>
            </a>
        </li>
    </ul>

</div>

<script src="../js/jquery-3.2.1.js"></script>
<script>

    var currentPage = 1;
    var totalPage;

    $("#newBlog").click(function () {
        $.ajax({
            url: "/newblog",
            type: "post",
            success: function () {
                window.location.href = "/newblog";
            }
        })
    });


    allBlog();
    function allBlog() {
        $.ajax({
            url: "/blog/allblog",
            type: "post",
            success: function (result) {
                var list = result.data;
                for (var i in list) {
                    var blog = list[i];
                    if (i < 3) {
                        newTr(blog)
                    }
                }
            }
        })
    }


    function newTr(blog) {
        var bid = blog.id;
        var content = $("<tr>>" +
                "<td onclick='seeMore(" + bid + ")'>" + blog.title + "</td>" +
                "<td>" + blog.desc + "</td>" +
                "<td><a onclick='deleteBlog(" + bid + ")'>删除</a></td>" +
                "</tr>");
        var tbody = $("#tbody");
        tbody.append(content);
    }

    //删除博客
    function deleteBlog(bid) {
        $.ajax({
            url: "/blog/deleteblog",
            type: "post",
            data: {
                bid: bid
            }
        });
        $("#container").load("#tbody");
    }

    //查看详情
    function seeMore(bid) {
        $.ajax({
            url: "/blog/seemore",
            type: "post",
            data: {
                bid: bid
            },
            success: function (result) {
                window.location.href = "/blogdesc"
            },
            error: function () {
                alert("错误！")
            }
        })
    }

    name();
    //显示用户名
    function name() {
        $.ajax({
            url: "/user/name",
            type: "post",
            success: function (result) {
                $("#name").append(result.data);
            },
            error: function () {
                alert("未登录！请先登录！")
            }
        })
    }

    //分页
    page();
    function page() {
        $.ajax({
            url: "/blog/page",
            type: "post",
            success: function (result) {
                totalPage = result;
                for (var i = result; i > 0; i--) {
                    $("#fistli").after(" <li><a style='text-decoration: none' " +
                            "role='button' " +
                            "onclick='clickPage(" + i + ")'>" + i + "</a></li>");
                }
            },
            error: function () {
                alert("分页错了！");
            }
        })
    }
    function clickPage(page) {
        currentPage = page;
        $.ajax({
            url: "/blog/clickpage",
            type: "post",
            data: {
                page: page
            },
            success: function (result) {
                var list = result.data;
                //清空tr
                $("#tbody>tr").empty("");
                for (var i in list) {
                    var blog = list[i];
                    newTr(blog)
                }
            }
        })
    }

    function pageUp(page) {
        var countUp = page + 1;
        if (countUp <= totalPage) {
            clickPage(countUp);
        }
    }
    function pageDown(page) {
        var countDown = page - 1;
        if (countDown > 0) {
            clickPage(countDown);
        }
    }

    //查询博客
    $("#subBtn").click(function () {
        $.ajax({
            url: "/blog/searchbykeyword",
            type: "post",
            data: {
                keyword: $("#search").val()
            },
            success: function (result) {
                var list = result.data;
                $("#tbody>tr").empty("");
                for (var i in list) {
                    var blog = list[i];
                    newTr(blog);
                }
            },
            error: function () {
                alert("错误")
            }
        })
    });


</script>
</body>
</html>